<template>
  <div class="app-container">
    <el-button type="primary" @click="addUser">添加</el-button>
    <el-table :data="userList" style="width: 100%;margin-top:30px;" v-loading.body="listLoading" border>
      <el-table-column align="center" label="序号" width="100">
        <template scope="scope">
          {{scope.row.index}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="账号" width="200">
        <template scope="scope">
          {{scope.row.userName}}
        </template>
      </el-table-column>
      <el-table-column align="header-center" label="姓名" width="200">
        <template scope="scope">
          {{scope.row.name}}
        </template>
      </el-table-column>

      <el-table-column align="header-center" label="电话" width="200">
        <template scope="scope">
          {{scope.row.mobile}}
        </template>
      </el-table-column>
      <el-table-column align="header-center" label="角色" width="300">
        <template scope="scope">
          {{scope.row.roleName}}
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="300">
        <template scope="scope">
          <el-button type="primary" size="small" @click="editUser(scope)">编辑</el-button>
          <el-button type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
    </div>
    <el-dialog :visible.sync="dialogVisible" :title="dialogType==='edit'?'编辑用户':'添加用户'">
      <el-form autoComplete="on" :model="user" label-width="80px" label-position="left" ref="user" :rules="userRules">

        <el-form-item label="账号名" prop="userName" v-if="dialogType==='new'">
          <el-input autoComplete="on" name="userName" v-model="user.userName" placeholder="账号名"></el-input>
        </el-form-item>

        <el-form-item label="姓名" prop="name">
          <el-input autoComplete="on" name="name" v-model="user.name" placeholder="姓名"></el-input>
        </el-form-item>

        <el-form-item label="电话" prop="mobile">
          <el-input autoComplete="on" name="mobile" v-model="user.mobile" placeholder="电话"></el-input>
        </el-form-item>

        <el-form-item label="角色" prop="roleId">
          <el-select name="roleId" v-model="user.roleId" placeholder="角色" class="el-input">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="confirmUser">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { page, add } from 'api/user'
  import { getRoles } from 'api/role'
  const defaultUser = {
    id: '',
    userName: '',
    name: '',
    mobile: ''
  }
  export default {
    data() {
      return {
        userList: [],
        user: Object.assign({}, defaultUser),
        dialogVisible: false,
        dialogType: 'new',
        listLoading: true,
        checkStrictly: false,
        total: 10,
        listQuery: {
          page: 1,
          limit: 20,
          name: undefined
        },
        options: [],
        userRules: {
          userName: [{
            required: true,
            message: '请输入账号名称',
            trigger: 'blur'
          }],
          name: [{
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }],
          mobile: [{
            required: true,
            message: '请输入电话号码',
            trigger: 'blur'
          },
          { pattern: /^0{0,1}(13[0-9]|15[7-9]|153|18[0-9]|199)[0-9]{8}$/, message: '手机号格式有误', trigger: 'blur' }],
          roleId: [{
            required: true,
            message: '请选择角色',
            trigger: 'blur',

          }],
        }
      }
    },
    created() {
      this.getList()
      this.getRoleOptions()
    },

    methods: {
      getList() {
        this.listLoading = true
        page(this.listQuery).then(response => {
          var data = response.data
          this.userList = data.rows;
          this.total = data.total;
          this.listLoading = false;
          for (var ix in this.userList) {
            this.userList[ix].index = parseInt(ix, 10) + 1;
          }
          this.listLoading = false
        })
      },
      getRoleOptions() {
        this.options = []
        getRoles().then(response => {
          if (response.status == 200) {
            var data = response.data;
            for (var ix in data) {
              var row = data[ix]
              this.options.push({ value: row.id, label: row.roleName })
            }
          }
        })
      },
      addUser() {
        this.dialogVisible = true
        this.dialogType = 'new'
      },
      editUser(scope) {
        this.dialogType = 'edit'
        this.dialogVisible = true
        // this.role.roleName = scope.row.roleName
        // this.role.description = scope.row.description
        // this.role.status = 1
        // this.role.id = scope.row.id
      },
      confirmUser() {
        this.$refs.user.validate(valid => {
          if (valid) {
            var user = this.user;
            add(user).then(response => {
              if (response.status == 200) {
                const isEdit = this.dialogType === 'edit'
                this.dialogVisible = false
                this.getList()
                this.$success('保存成功')
              } else {
                this.$error("保存失败")
              }
            })


          }

        })
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
      },
    },
  }
</script>